<template>
  <div class="app-container">
    <h3 class="title">提现订单详情</h3>
    <div class="inputBox">
      <el-input v-model="search.orderSn" class="input" placeholder="请输入订单编号查询" />
      <el-select v-model="search.categoryName" class="input" placeholder="请选择商品类型">
        <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.name" />
      </el-select>
      <el-input v-model="search.goodsName" class="input" placeholder="请输入商品名称查询" />
      <el-input v-model="search.userName" class="input" placeholder="请输入购买人查询" />
      <el-button type="primary" class="ml10" @click="toSearch">查询</el-button>
      <el-button type="primary" @click="toReset">重置</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <!-- this.prductForm.saleRebate = Math.round((this.prductForm.saleRebate * 100)) -->
      <el-table-column align="center" label="订单编号">
        <template slot-scope="scope">
          {{ scope.row.orderSn }}
        </template>
      </el-table-column>
      <el-table-column label="商品名称">
        <template slot-scope="scope">
          {{ scope.row.goodsName }}
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          {{ scope.row.categoryName }}
        </template>
      </el-table-column>
      <el-table-column label="单价" width="70">
        <template slot-scope="scope">
          {{ scope.row.goodsSalePrice }}
        </template>
      </el-table-column>
      <el-table-column label="购买数量">
        <template slot-scope="scope">
          <p>{{ scope.row.goodsQuantity }}</p>
        </template>
      </el-table-column>
      <el-table-column label="总价">
        <template slot-scope="scope">
          <p>{{ scope.row.goodsAmount }} 元</p>
        </template>
      </el-table-column>
      <el-table-column label="购买人">
        <template slot-scope="scope">
          <p>{{ scope.row.userName }}</p>
        </template>
      </el-table-column>
      <el-table-column label="订单完成时间" width="105">
        <template slot-scope="scope">
          <p>{{ scope.row.completeTime }}</p>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <p>{{ '已完成' }}</p>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="created_at" label="操作" width="290">
        <template slot-scope="scope">
          <el-button
            v-if="setPermissionBtn('edit', scope.row)"
            size="mini"
            value="编辑"
            type="primary"
            @click="edit(scope.row, scope.$index)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('del', scope.row)"
            :disabled="scope.row.expireStatus === 1"
            size="mini"
            value="删除"
            type="danger"
            @click="del(scope.row.id)">{{ scope.row.btnName }}</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div v-if="!listLoading && list.length" class="totalDiv">
      合计&nbsp;&nbsp;&nbsp; <span class="txt">交易订单数量:</span><span class="blue">{{ priceData.total }}</span> &nbsp; <span class="txt">金额:</span><span class="blue">{{ priceData.totalAmount }} </span><span class="txt">元</span>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <!-- <AddPercent
      :settings-visible.sync="dialogTableVisible"
      :dialog-data.sync="rowData"
      :my-index.sync="detailIndex"
      :setting-mode="'percent'"
      @updataParent="submitFn"/> -->

    <!-- 驳回原因
        /platformCommission/record/refusedReason
        /platformCommission/refusedReason
      -->
  </div>
</template>

<script>
import { getPlatformCommissionConfigList, addPlatformCommission, editPlatformCommission, delPlatformCommission, getMonthOrderList } from '@/api/platformCommission'
import Pagination from '@/components/Pagination'
import { Message } from 'element-ui'
import AddPercent from '@/components/platformCommission/addPercent'
import { categoryQuery } from '@/api/product' // 获取商品类型
// import { getByteLength } from '@/utils/validate'
// const inputValidatorNum = (v) => {
//   console.log(getByteLength(v))
//   if (getByteLength(v) > 600) {
//     return false
//   }
// }
export default {
  components: { Pagination, AddPercent },
  filters: {
    // statusFilter(status) {
    //   const statusMap = {
    //     published: 'success',
    //     draft: 'gray',
    //     deleted: 'danger'
    //   }
    //   return statusMap[status]
    // },
    typeStr(type) {
      const typesMap = {
        0: '过期',
        1: '有效'
      }
      return typesMap[type]
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 0,
        pageSize: 10
      },
      dialogTableVisible: false,
      detailList: [],
      formLabelWidth: '120px',
      detailIndex: -1,
      rowData: {},
      search: {
        orderSn: '',
        categoryName: '',
        goodsName: '',
        userName: ''
      },
      categoryList: [],
      priceData: {
        total: 0,
        totalAmount: ''
      }
      // dialogFormVisible: false,
      // courseTypeId: null,
    //   course: {
    //     name: '',
    //     introduce: '',
    //     price: '',
    //     imgUrl: ''
    //   },
    //   isEdit: false,
    //   uploadData: {
    //     key: '',
    //     token: ''
    //   },

    }
  },
  computed: {
    setPermissionBtn() {
      return function(str, row) {
        let index = -1
        const buttonList = this.$store.getters.button
        index = buttonList.findIndex(item => item.value === str)
        // console.log(index)
        if (index !== -1) {
          row.btnName = buttonList[index].name
          return true
        } else {
          return false
        }
      }
    }
  },
  watch: {
    // 'permissionList'(newVal) {
    //   this.permissionList = newVal
    //   this.permissionShow = true
    // }
  },
  created() {
    this.fetchData()
    this.getCategory()
    // this.getPermissonFn()
  },
  mounted() {
    this.getPermissonFn() // 获取按钮权限 vuex的button
    console.log('routerQuery:', this.$route.query)
    if (this.$route.query && JSON.stringify(this.$route.query) !== '{}') {
      this.fetchData(this.$route.query)
    }
  },
  methods: {
    // 获取所有分类信息
    getCategory() {
      categoryQuery().then(res => {
        console.log('获取所有分类信息:', res)
        if (res.code === '200') {
          this.categoryList = res.data
        }
      })
    },
    // 查询
    toSearch() {
      this.listLoading = true
      const newData = this.objectCon(this.listQuery, this.search)
      getMonthOrderList(newData).then(response => {
        console.log('搜索:', response)
        if (response.code === '200') {
          this.list = response.data.list
          this.total = response.data.total
          this.priceData.total = response.data.total
          this.priceData.totalAmount = response.data.totalAmount
        } else {
          Message.error(response.message + '-' + response.data)
        }
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 重置
    toReset() {
      this.search.orderSn = ''
      this.search.categoryName = ''
      this.search.categoryList = ''
      this.search.goodsName = ''
      this.search.userName = ''
    },
    fetchData(data) {
    //   this.listLoading = true
      const newData = this.objectCon(this.listQuery, data)
      getMonthOrderList(newData).then(response => {
        console.log(response)
        this.list = response.data.list
        console.log('response:', response.data.list)
        this.total = response.data.total
        this.priceData.total = response.data.total
        this.priceData.totalAmount = response.data.totalAmount
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    }
    // addCourse(// ) {
    //   this.$data.//  = //
    //   this.$data.dialogFormVisible = true
    // },
    // getValue(value) {
    //   this.$data.temp.status = value
    // },
    // getEnable(value) {
    //   this.$data.course.isEnable = value
    // },
    // getChildren(value) {
    //   this.$data.course.courseList = value
    // },
    // addCourseType() {
    //   this.$router.push({
    //     path: 'add',
    //     query: { isEdit: false }
    //   })
    // }
    // edit(pid) {
    //   const _this = this;
    //   const object = Object.assign({ isEdit: true }, _this.$data.list[pid])
    //   this.$router.push({
    //     path: 'add',
    //     query: object
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
  .el-icon-remove {
    margin-left: 10px;
  }
  .img_url {
    width: 110px;
    height: 110px;
  }
  .inputBox{
    div{ margin-bottom: 10px;}
    .input:nth-of-type(1){ width: 160px;}
    .input:nth-of-type(2){ width: 160px;}
    .input:nth-of-type(3){ width: 160px;}
    .input:nth-of-type(4){ width: 150px;}
  }
  .totalDiv{
    width: 100%;
    height: 50px;
    line-height: 50px;
    border:1px solid #EEE;
    border-top: none;
    box-sizing: border-box;
    padding-left: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-align: center;
    .txt{
        color: #999;
    }

    .red {
        color: #a60807;
        margin-left: 10px;
    }
    .blue {
        color: #09c;
        margin-left: 4px;
    }
}
</style>
